<template>
  <div class="show-area-info">
    <div class="show-area-info__title">{{ title || "-" }}</div>
    <section class="show-area-info__detail">
      <div class="text d-flex align-items-center">
        <div style="margin-right: 20px">Score: {{ score }}</div>
        <Scores :score="score"></Scores>
      </div>
      <div class="text">Mentions: {{ mentions }}</div>
      <div class="text">No. of Downloads: {{ downloads }}</div>
    </section>
    <section class="show-area-info__img-container">
      <img v-for="item in imgList" class="img" :src="item" />
    </section>
  </div>
</template>

<script setup>
import Scores from "/src/components/Scores.vue";

defineProps({
  title: String,
  score: {
    type: Number,
    default: 0,
  },
  mentions: {
    type: Number,
    default: 0,
  },
  downloads: {
    type: Number,
    default: 0,
  },
  imgList: {
    type: Array,
  },
});
</script>

<style>
.show-area-info {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  width: 400px;
  background: #19192f;
  padding: 20px;
}
.show-area-info__title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}
.show-area-info__detail p {
  margin-bottom: 0;
}
.show-area-info__detail .text + .text {
  margin-top: 10px;
}
.show-area-info__img-container {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.show-area-info .img {
  width: 360px;
  height: 160px;
  object-fit: cover;
}
</style>
